<template>
	<div id="container">
		<imgSectionTitle :title="contentList[0].channelName"></imgSectionTitle>
		<div class="translateX-container LCdiv-xCbewH">
			<div class="translateX-item" v-for="item in contentList">
				<a class='block_a' :href="Path+item?.url" target="_blank">
					<div class="translateX-box translateX-box-after">
						<div class="translateX-Imagebox"><img class="translateX-Imagebox-img" :src="getImgPath(item?.headImag || '')" /></div>
						<div class="translateX-div-title translateX-title-box">{{ item.title }}</div>
					</div>
				</a>
			</div>
			<div class="translateX-marsk" lc_id="wvpkrbysnc"></div>
		</div>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue';	
//import imgSectionTitle from './imgSectionTitle.vue';
export default {
		props:{
			contentList:{
				type:Array,
				default:[]
			}
		},
	components: {
		imgSectionTitle: defineAsyncComponent(() => import(rootPath+'/src/components/imgChannel/imgSectionTitle.vue')),
	},
	data() {
		return {
			title: '明星',
			src: '../img/pic6.jpg',
			Path:getRootPath(),
			imgPath:imgPath,
		};
	},
	mounted() {
		this.$nextTick(()=>{
			this.initStranslateXFN_wPR();
		})
	},
	methods: {
		initStranslateXFN_wPR() {
			var contanier = document.querySelector('#container');
			var scontanier = contanier.querySelector('.LCdiv-xCbewH');
			var imgs = scontanier.querySelectorAll('.translateX-item');
			imgs[0].querySelector('.translateX-box').classList.remove('translateX-box-after');
			for (let i = 0; imgs.length > i; i++) {
				imgs[i].style.zIndex = i + 1;
				i > 0 ? imgs[i].querySelector('.translateX-div-title').classList.remove('translateX-title-box') : '';
				i > 0
					? (imgs[i].querySelector('.translateX-div-title').style.width = getComputedStyle(imgs[i]).height) &&
					  (imgs[i].querySelector('.translateX-div-title').style.transform = 'rotate(90deg)') &&
					  (imgs[i].querySelector('.translateX-div-title').style.left = '-198px') &&
					  (imgs[i].querySelector('.translateX-div-title').style.top = '-245px') &&
						(imgs[i].querySelector('.translateX-div-title').style.paddingTop = '21px 32px')&&
					  (imgs[i].querySelector('.translateX-div-title').style.display = 'block')
					: '';
				imgs[0].style.width = '860px';
			}
			imgs.forEach(item => {
				item.addEventListener('mouseover', e => {
					for (let i = 0; imgs.length > i; i++) {
						imgs[i].style.zIndex = i + 1;
						imgs[i].style.width = '85px';
						imgs[i].querySelector('.translateX-box').classList.add('translateX-box-after');
						imgs[i].querySelector('.translateX-div-title').classList.remove('translateX-title-box');
						imgs[i].querySelector('.translateX-div-title').style.transform = 'rotate(90deg)';
						imgs[i].querySelector('.translateX-div-title').style.width = getComputedStyle(imgs[i]).height;
						imgs[i].querySelector('.translateX-div-title').style.display = 'block';
						imgs[i].querySelector('.translateX-div-title').style.left = '-198px';
						imgs[i].querySelector('.translateX-div-title').style.top = '-245px';
						imgs[i].querySelector('.translateX-div-title').style.padding = '21px 32px';
					}
					item.style.width = '860px';
					item.querySelector('.translateX-box').classList.remove('translateX-box-after');
					item.querySelector('.translateX-div-title').classList.add('translateX-title-box');
					item.querySelector('.translateX-div-title').style.transform = 'rotate(0deg)';
					item.querySelector('.translateX-div-title').style.width = getComputedStyle(item.querySelector('.translateX-box')).width;
					item.querySelector('.translateX-div-title').style.left = '0px';
					item.querySelector('.translateX-div-title').style.top = '-40px';
					e.stopPropagation();
					e.preventDefault();
				});
			});
		},
		getImgPath(url){
			return imgPath(url);
		},
	}
};
</script>

<style>
.translateX-box {
	width: 860px;
	height: 481px;
	position: relative;

	.translateX-Imagebox {
		width: 100%;
		height: 100%;
		.translateX-Imagebox-img {
			width: 100%;
		}
	}
}
.translateX-box-after {
	position: relative;
	&:after {
		content: '';
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.6;
	}
}

.translateX-container {
	position: relative;
	width: 1200px;
	height: 481px;
	display: flex;
	overflow: hidden !important;
	z-index: 0;
	background-color: #F5F2F0;
}

.translateX-div-title {
	width: 100%;
	height: 74px;
	position: relative;
	top: -40px;
	z-index: 1;
	font-size: 24px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ffffff;
	line-height: 32px;
	padding: 22px 24px;
	box-sizing: border-box;
	margin-top: -32px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.translateX-div-title:hover {
		color: #ff3333;
	}
.translateX-img {
	width: 100%;
	height: 100%;
}

.translateX-item {
	width: 85px;
	height: 481px;
	position: relative;
}

.translateX-title {
	font-size: 18px;
	color: #fff;
	font-weight: 500;
	line-height: 18px;
	padding: 0 24px;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
}

.translateX-title-box {
	position: relative;
	&:after {
		content: '';
		position: absolute;
		height: 76px;
		background: linear-gradient(360deg, #111111 0%, rgba(17,17,17,0) 100%);
		width: 100%;
		left: 0px;
		top: -4px;
		z-index: -1;
	}
}
</style>
